属性描述符

Property Descriptor 属性描述符

• 用于描述一个属性的相关信息

const obj = {
    name: 'bozai',
    age: 18
}

// 获
const desc1 = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(desc1);  //--> {value: "bozai", writable: true, enumerable: true, configurable: true}

const desc2 = Object.getOwnPropertyDescriptors(obj);
console.log(desc2);  //--> age: {value: 18, writable: true, enumerable: true, configurable: true}
                        // name: {value: "bozai", writable: true, enumerable: true, configurable: true}

// 改
Object.defineProperties(obj, {
    age: {
        value: 20
    }
})

Object.defineProperty(obj, 'age', {
    value: 17,
    configurable: false,  // 描述符是否可以修改
    enumerable: false,  // 属性是否可以被枚举(不可循环)
    writable: false,  // 属性是否可以重新赋值
})
obj.age = 30;  // 重新赋值无效(以 Object.defineProperty 的方式赋值将报错)
console.log(obj);  //--> {name: "bozai", age: 17}

get() & set()

const obj = {
    name: 'bozai',
    age: 18
}
Object.defineProperty(obj, 'age', {
    get () {  // 获取属性
        console.log('get');
    },
    set (val) {  // 设置属性
        console.log('set' + val);
    }
})
obj.age  //--> get
obj.age = 20  //--> set20
console.log(obj.age)  //--> get undefined

控制属性限定范围

const obj = {
    age: 18,
}
Object.defineProperty(obj, 'age', {
    get () {
        return obj._age;
    },
    set (val) {
        if (val < 0) {
            val = 0;
        } else if (val > 100) {
            val = 100
        }
        obj._age = val;
    }
})
obj.age = -200;
console.log(obj.age);  //--> 0

常用场景，可以利用属性赋值渲染DOM

function HTMLSpanElement () {
    Object.defineProperty(this, 'innerHTML', {
        get () {
            // 获取对应元素内容
        },
        set (val) {
            // 重新渲染页面窗口
        }
    })
}